<template>
  <div class="pages deliveryOrder">
    <div class="pageLevel" v-if="!sub">
      <div class="tableSearch">
        <el-button type="primary" v-if='setRole("新增")' @click="routerPushAdd()" size="mini">新增</el-button>
      </div>

      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form size="mini">
          <el-form-item label="退货单号:" label-width="80px">
            <el-input v-model="selectData.salekeyword" placeholder="请输入退货入库单号"></el-input>
          </el-form-item>
          <el-form-item label="客户:" label-width="80px">
            <el-input v-model="selectData.saleUser" placeholder="请输入客户"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="saleOrderListArray" stripe>
          <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
          <el-table-column prop="purchaseinCode" label="退货入库单号" align="center"></el-table-column>
          <el-table-column prop="orderDate" label="单据时间" :formatter="timestamp" align="center"></el-table-column>
          <el-table-column prop="shopName" label="客户名称" align="center"></el-table-column>
          <el-table-column prop="amount" label="总金额" align="center"></el-table-column>
          <el-table-column prop="purchaseStatus" label="订单状态" align="center">
            <template slot-scope="scope">
              <span>{{returnStatusArr[scope.row.purchaseStatus]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fromCode" label="来源单号" align="center"></el-table-column>
          <el-table-column prop="userName" label="操作员" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="routerPushInfo(scope.row.id)" type="text">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <page-unit :pageData="pageData" :func="getSaleOrderList"></page-unit>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import utils from "@/util/state";
import util from "@/util";

import {
  selectOrderGoodsPurchaseReturnListPage
} from "@/api";
import pageUnit from "@/components/Page";
export default {
  computed: mapState(["merchantId", "sub", "power"]),
  components: { pageUnit },
  data () {
    return {
      timestamp: util.timestamp,
      returnStatusArr:utils.returnStatusArr,
      selectData: {
        // 搜索关键字
        salekeyword: "",
        saleUser: ""
      },
      showSearchHigh: false, // 是否显示高级查询
      saleOrderListArray: [], // 销售退货单列表数组
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      }
    };
  },
  mounted () {
    this.getSaleOrderList(this.pageData.pageSize, 1);
  },
  watch: {
    sub: {
      handler: function (val, oldVal) {
        if (oldVal != null && val == false) {
          this.getSaleOrderList(this.pageData.pageSize, 1);
        }
      },
      deep: true
    }
  },
  methods: {
    //配置权限
    setRole (key) {
      return util.selectTitle(this.power, key);
    },
    // 获取销售退货单列表数据
    getSaleOrderList (pageSize, pageNum) {
      let data = {
        supplierId: this.merchantId,
        purchaseType: 0,
        pageSize: pageSize,
        pageNum: pageNum,
        shopName: this.selectData.saleUser,
        purchaseinCode: this.selectData.salekeyword
      };
      selectOrderGoodsPurchaseReturnListPage(data).then(res => {
        this.saleOrderListArray = res.data.list;
        this.pageData.totalItems = res.data.pageTotal;
      });
    },
    // 查询
    handleSearch () {
      this.pageData.currentPage=1
      this.getSaleOrderList(this.pageData.pageSize, this.pageData.currentPage);
    },
    // 跳新增
    routerPushAdd () { util.routerTo("/order-center/sale-management/sale-deliveryOrder/sale-deliveryOrderAdd"); },
    // 跳查看
    routerPushInfo (id) { util.routerTo("/order-center/sale-management/sale-deliveryOrder/sale-deliveryOrderLook", { id: id }); }
  }
};
</script>
